<template>
  <nav-bar-func title="我的信息"/>
  <el-tabs tab-position="left" style="height: 100vh" :before-leave="switchPane">
    <el-tab-pane label="我的信息">
      <profile-info/>
    </el-tab-pane>

    <el-tab-pane label="用户管理" v-if="showManager">
      <el-tabs style="height: 100vh">
        <el-tab-pane label="用户信息">
          <user-list/>
        </el-tab-pane>
        <el-tab-pane label="权限信息">
          <Permission/>
        </el-tab-pane>
        <el-tab-pane label="角色信息">
          <role/>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>

    <el-tab-pane label="写文章">
      <search
          :hasBtn="true"
          :placeholder="'文章标题'"
          :width="'100%'"
          :prefixIcon="editIcon"
          @inputText="inputText"
          @submit="submit"
          :icon="Upload"
          :btnText="'发布'"
      />
      <editor @articleText="articleText"/>
    </el-tab-pane>

    <el-tab-pane label="我的文章">
      <time-line/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {useStore} from 'vuex'
import { ElMessageBox, ElMessage } from 'element-plus'
import {Edit, Upload} from '@element-plus/icons-vue'
import {reactive} from "vue"
import {POST} from "@/api/index.ts"
import localstorage from '@/tools/localstorage';

import NavBarFunc from "@/components/navbar/NavBarFunc.vue";
import ProfileInfo from '@/views/profile/profileInfo/ProfileInfo.vue'
import TimeLine from "@/views/profile/timeline/TimeLine.vue"
import Editor from '@/components/editor/Editor.vue'
import Search from "@/components/search/Search.vue"
import UserList from "@/views/profile/userManager/UserList.vue";
import Permission from "@/views/profile/userManager/Permission.vue"
import Role from "@/views/profile/userManager/Role.vue"

export default {
  name: "Profile",
  components: {
    NavBarFunc,
    ProfileInfo,
    TimeLine,
    Editor,
    Search,
    Upload,
    UserList,
    Permission,
    Role
  },
  setup() {
    const store = useStore()
    const showManager = JSON.parse(localStorage.getItem("user")).userId === 'admin';
    console.log("manager: " + JSON.parse(localStorage.getItem("user")))
    const editIcon = Edit
    const article = reactive({
      userId: String,
      title: String,
      InnerText: String,
      tag: String,
      star: 0,
      watcher: 0,
    })

    // 发布文章
    const submit = () => {
      publish()
    }

    // 文章发表
    const publish = () => {
      if (article.title === "" || article.title == null) {
        ElMessage.warning("文章标题不能为空")
        return
      }
      if (article.InnerText === "" || article.InnerText == null) {
        ElMessage.warning("文章内容不能为空")
        return
      }
      let item = localstorage.getItemObject("user");
      article.userId = item.id
      article.tag = "interst"

      POST("/Article/PublishArticle", article, {}).then(res => {
        ElMessage.success("发表文章成功")
        // 刷新页面
        location.reload()
      }).catch(err => {
        ElMessage.error("发表文章出错啦，请重试")
      })
    }

    const inputText = (value) => {
      // 将文章标题进行赋值
      article.title = value
    }
    // 进行保存文章内容到 article 对象中
    const articleText = (value, render) => {
      article.InnerText = value
      console.log(value)
      // article.htmlContent = render
    }

    // 侧边标签切换提示
    const switchPane = (activeName, oldName) => {
      if (oldName === '2' && !(article.InnerText == null || article.InnerText === '')) {
        ElMessageBox.confirm(
          '是否要保存?',
          '警告',
          {
            confirmButtonText: '保存',
            cancelButtonText: '丢弃',
            type: 'warning',
          }
        ).then(() => {
          ElMessage({
            type: 'success',
            message: '保存成功',
          })
          // TODO 执行保存程序
          publish()
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '已丢弃',
          })
        })
      }
      return true
    }

    return {
      editIcon,
      switchPane,
      inputText,
      articleText,
      submit,
      Upload,
      showManager
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tab-pane {
  padding-top: 30px;
}
</style>